<template>
	<view class="page">
		<view v-if="current !== -1 && Array.isArray(list) && list.length > 0" class="test-question">
			<view class="title">
				{{list[current].title}}
			</view>
			<view class="opts">
				<view :class="['opt-item', {'active':answerList[current] === index}]"
					v-for="(item, index) in list[current].option" :key='index' @click="answerList[current] = index">
					{{getABCD(index)}}. {{item}}
				</view>
			</view>
			<view class="answer" v-if="answerShow">
				正确答案: {{getABCD(list[current].answer)}}
			</view>
			<view class="btns">
				<button type="primary" :disabled="answerList[current]===-1 || !String(answerList[current])"
					@click="answerShow = true">确认答案</button>
			</view>


			<scroll-view class="outline-scroll-view" scroll-y>
				<view class="outline">
					<view
						:class="['outline-item', {'true': answerList[index]===list[index].answer }, {'false': Number(answerList[index]) > -1 && answerList[index] !== list[index].answer }, {'active': current === index}]"
						v-for="(item, index) in list" :key='index' @click="handleChangeTestQuestion(index)">
						{{index + 1}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="error-msg" v-else>
			请稍等
		</view>

	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'
	import {
		getTestQuestionsByQuestionBankId
	} from '@/api/testQuestions.js'

	const questionBankId = ref('')
	const list = ref([])
	const current = ref(0)
	const answerStr = 'ABCD'
	const answerShow = ref(false)
	const answerList = ref([])

	const getABCD = (index) => {
		return answerStr[index]
	}
	
	const handleChangeTestQuestion = (index) => {
		answerShow.value = false
		current.value = index
	}

	onMounted(async () => {
		const route = useRoute()
		if (route.query.id && route.query.id !== 'undefined') {
			questionBankId.value = route.query.id
			list.value = await getTestQuestionsByQuestionBankId(questionBankId.value)
		}
	})
</script>

<style lang="scss" scoped>
	.page {
		.test-question {
			padding: 10rpx 20rpx;

			.opts {
				margin-top: 20rpx;

				.opt-item {
					margin-top: 12rpx;

					&:first-child {
						margin-top: 0;
					}

					&.active {
						color: olivedrab;
					}
				}
			}

			.answer {
				margin-top: 20rpx;
			}

			.btns {
				margin-top: 60rpx;
				display: flex;
			}

			.outline-scroll-view {
				height: 600rpx;
				margin-top: 60rpx;

				.outline {
					display: flex;
					flex-wrap: wrap;

					.outline-item {
						display: flex;
						align-items: center;
						justify-content: center;
						width: calc((100% - 20rpx * 4) / 5);
						margin-right: 20rpx;
						margin-top: 20rpx;
						height: 100rpx;
						border-radius: 12rpx;
						background-color: #fff;

						&:nth-of-type(5n) {
							margin-right: 0;
						}

						&:nth-of-type(-n + 5) {
							margin-top: 0;
						}

						&.true {
							background-color: #42b983;
							color: #fff;
						}

						&.false {
							background-color: #ff7d7f;
							color: #fff;
						}

						&.active {
							background-color: #55aaff;
							color: #fff;
						}
					}
				}
			}

		}
	}
</style>